<template>
	<div class="container">
		<el-row>
			<el-col :span="24">
				<yd-form ref="myForm" :options="formOptions" :model="state.queryParams" @change="handlerSelectChange" @formInit="handlerFormInit">
					<template #form-btn>
						<div>
							<el-button class="yd-form-btn" type="primary" @click="loadData()">查询</el-button>
							<el-button class="yd-form-btn" @click="exportClick">导出</el-button>
						</div>
					</template>
				</yd-form>
			</el-col>
			<el-col :span="24">
				<el-table :data="dataList" style="width: 100%">
					<el-table-column prop="cycleTime" label="数据时间" width="180" />
					<el-table-column prop="abilityName" label="能力名称" width="150" />
					<el-table-column prop="serviceName" label="服务名称" width="150" />
					<el-table-column prop="userOrName" label="使用方/机构名称" width="150" />
					<el-table-column prop="abilityType" label="能力类型" width="150" />
					<el-table-column label="API" align="center">
						<el-table-column prop="apiReqCount" label="调用量" width="120" />
						<el-table-column prop="apiSystemSuccessCount" label="系统级成功量" width="120" />
						<el-table-column prop="apiBusinessSuccessCount" label="业务级成功量" width="120" />
						<el-table-column prop="apiAvgServerResponseTime" label="平均响应时间" width="120" />
					</el-table-column>
					<el-table-column label="SDK" align="center">
						<el-table-column prop="sdkReqCount" label="调用量" width="120" />
						<el-table-column prop="sdkSystemSuccessCount" label="系统级成功量" width="120" />
						<el-table-column prop="sdkAvgServerResponseTime" label="平均响应时间" width="120" />
					</el-table-column>
					<el-table-column label="H5" align="center">
						<el-table-column prop="h5ReqCount" label="浏览量" width="120" />
						<el-table-column prop="h5AvgServerResponseTime" label="平均响应时间" width="120" />
					</el-table-column>
					<el-table-column label="PaaS/SaaS" align="center">
						<el-table-column prop="paasSaasLoginCount" label="用户登录次数" width="120" />
						<el-table-column prop="paasSaasReqCount" label="入网请求量" width="120" />
					</el-table-column>
				</el-table>
				<div style="float: right">
					<el-pagination
						v-model:current-page="state.queryParams.pageNum"
						v-model:page-size="state.queryParams.pageSize"
						:page-sizes="[10, 20, 30, 50, 100]"
						layout="total, sizes, prev, pager, next, jumper"
						:total="pageConfig.total"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
					/>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="alarm-query">
import { useDataTable } from '@/hooks';
import { onActivated, onBeforeMount, onMounted, reactive, ref, watch } from 'vue';
import { queryDataAlarm } from '@/api/middle-monitor/alarm-query';
import { useRoute } from 'vue-router';
import { calculateTimeBefore, downloadFromBlob, getDefaultDate, getDefaultLast1hDate } from '@/utils/common';
import { publicValue, queryMpServiceOptions } from '@/api/search/searchOptions';
import { queryImplementationDown, queryImplementationIndicators } from '@/api/middle-monitor/indicator';
import { ElMessage } from 'element-plus';

interface Params {
	pageNum: number;
	pageSize: number;
	serviceCode?: string;
	serviceName?: string;
	abilityCode?: string;
	abilityName?: string;
}
interface State {
	queryParams: Params;
	tableData: any[];
}
const { dataList, pageConfig, initData, loadData } = useDataTable();
const route = useRoute();
const state = reactive<State>({
	tableData: [],
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		...route.query,
	},
});
pageConfig.total = pageConfig.total || state.tableData.length;
const formOptions = reactive<FormOptionType>([
	{
		type: 'select',
		label: '能力名称',
		prop: 'abilityName',
		selectKey: 'id',
		attrs: {
			clearable: true,
		},
		api: { name: 'queryMpAbilityOptions', params: {} },
		cascaders: [
			{
				cascadersParams: 'serviceName',
				api: {
					name: 'queryIndicatorServiceOptions',
				},
			},
		],
	},
	{
		type: 'select',
		label: '服务名称',
		prop: 'serviceName',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'input',
		label: '使用方/机构名称',
		prop: 'userName',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'date-picker',
		label: '时间范围',
		prop: 'dateRange',
		dateType: 'datetimerange',
		enableCrossDay: true,
		// shortcutsKeys: ['last1h', 'today', 'lastDay'],
		defaulShortcutsKey: 'today',
		span: 10,
	},
]);

function queryServiceName(id: string | number) {
	queryMpServiceOptions(id).then((res: ApiResponse) => {
		console.log(res, 'res');
	});
}

async function handlerFormInit(form: any, val: any) {
	let res = val[0].children?.filter((item: any) => item.id === state.queryParams.abilityName);
	if (res && res.length > 0) {
		state.queryParams.abilityCode = res[0].value;
	}
	state.queryParams.serviceCode = state.queryParams.serviceName;
	initData(queryImplementationIndicators, state.queryParams);
}

/**
 * 下拉框change
 */
function handlerSelectChange(options: BaseOptionType, value: any) {
	if (options.type === 'select' && options.label === '能力名称') {
		let res = options.children?.filter((item: any) => item.id === value);
		if (res && res.length > 0) {
			let val: number | any = res[0].value;
			state.queryParams.abilityCode = val;
		}
	}
}
const handleSizeChange = (val: number) => {
	console.log(`${val} items per page`);
	state.queryParams.pageSize = val;
	loadData();
};
const handleCurrentChange = (val: number) => {
	console.log(`current page: ${val}`);
	state.queryParams.pageNum = val;
	loadData();
};
/**
 * 导出
 */
function exportClick() {
	queryImplementationDown(state.queryParams).then((res: ApiResponse) => {
		downloadFromBlob(res, '用户信息模板').then((o) => {
			if (!o.flag) {
				ElMessage.warning(o.msg);
			}
		});
	});
}
onActivated(() => {
	setTimeout(() => {}, 200);
});
watch(
	() => pageConfig,
	(newVal) => {
		// tableConfig.pagination!.total = newVal.total;
	},
	{ deep: true }
);
</script>

<style scoped lang="scss">
:deep .el-table__header,
:deep .el-scrollbar__view,
:deep .el-table__body {
	width: 100% !important;
}
</style>
